import {ConfigEnv, defineConfig, loadEnv, UserConfig} from 'vite'
import react from '@vitejs/plugin-react-swc'
import { resolve } from 'path';
import { createHtmlPlugin } from 'vite-plugin-html';
// @ts-ignore
import {wrapperEnv} from "./src/utils/getEnv";
import checker from "vite-plugin-checker";
import {createSvgIconsPlugin} from "vite-plugin-svg-icons";
// @ts-ignore
import eslintPlugin from "vite-plugin-eslint";
// https://vitejs.dev/config/
export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
    console.log('mode', mode, process.cwd());
    // process.cwd() 当前工程目录 yarn dev --mode devloop 可以启动时修改
    const env = loadEnv(mode, process.cwd());
    console.log('env', env);
	const viteEnv = wrapperEnv(env);
    return {
			base: '/vitereact',
			resolve: {
				alias: {
					'@': resolve(__dirname, 'src')
					// "vue-i18n": "vue-i18n/dist/vue-i18n.cjs.js"
				}
			},
			plugins: [
				react(),
				createHtmlPlugin({
					inject: {
						data: {
							title: viteEnv.VITE_GLOB_APP_TITLE
						}
					}
				}),
				// ts 类型错误直接输出控制台,页面，
				checker({
					typescript: true
				}),
				// * 使用 svg 图标
				createSvgIconsPlugin({
					iconDirs: [resolve(process.cwd(), 'src/assets/icons/svg')],
					symbolId: 'icon-[dir]-[name]'
				}),
				// * EsLint 报错信息显示在浏览器界面上
				eslintPlugin(),
				// * cdn 引入（vue按需引入会导致依赖vue的插件出现问题(列如:pinia/vuex)）
				/*importToCDN({
					modules: [
						// {
						// 	name: "lodash",
						// 	var: "_",
						// 	path: "https://jkljkkkla/.js"
						// }
						// {
						// 	name: "vue",
						// 	var: "Vue",
						// 	path: "https://unpkg.com/vue@next"
						// },
						// 使用cdn引入element-plus时,开发环境还是需要在main.js中引入element-plus,可以不用引入css
						// {
						// 	name: "element-plus",
						// 	var: "ElementPlus",
						// 	path: "https://unpkg.com/element-plus",
						// 	css: "https://unpkg.com/element-plus/dist/index.css"
						// }
					]
				})*/
			],
			// * 打包去除 console.log && debugger
			esbuild: {
				pure: viteEnv.VITE_DROP_CONSOLE ? ['console.log', 'debugger'] : []
			},
			optimizeDeps: {
				include: ['ant-design-vue/es/locale/zh_CN', 'dayjs/locale/zh-cn']
			},
			css: {
				// 对css配置，会给postcss modules
				// modules: {
				//   // 修改生成类名
				//   localsConvention: "cameClassOnly",
				//   // 配置当前
				//   scopeBehaviour: '',
				//   // 类名
				//   generateScopedName: (name,filename,css) => {
				//     return '123'
				//   }
				// },
				preprocessorOptions: {
					less: {
						// additionalData: `@import "@/src/hooks/theme/style/var.less";`
						// math : 'always', // 全局计算
						// globalVars: {
						// 	// 全局变量
						// 	mainColor: 'red'
						// }
					}
				}
				// devSourcemap: true, // 文件报错显示源文件位置，文建索引开启
				// 手机屏幕自适应配置
				/*postcss: {
					plugins: [
						pxtoViewPort({
							unitToConvert: 'px', // 转换单位
							viewportWidth: 320
						})
					]
				}*/
			},
			build: {
				// 打包配置
				// chunkSizeWarningLimit： 2000,
				cssCodeSplit: true, // css 是否分包
				// sourcemap: false,
				// minify: "terser",// esbuild 打包快 terser 体积小
				// terserOptions: {
				// 	compress: {
				// 		drop_console: viteEnv.VITE_DROP_CONSOLE,
				// 		drop_debugger: true
				// 	}
				// },
				// assetsInlineLimit: 4000, // 图片小于4000用base64
				rollupOptions: {
					output: {
						// Static resource classification and packaging
						chunkFileNames: 'assets/js/[name]-[hash].js',
						entryFileNames: 'assets/js/[name]-[hash].js',
						assetFileNames: 'assets/[ext]/[name]-[hash].[ext]'
					}
				}
				// vite-plugin-pwa // 优化插件
			},
			// 服务端跨域配置
			server: {
				port: 8000,
				proxy: {
					'/api': {
						// target: 'https://aiot.imansoft.cn:8443',
						target: 'http://101.34.21.176:8080',
						changeOrigin: true,
						rewrite: path => path.replace(/^\/api/, '') // 第二个替换的参数 要与后端接口保持一致
					}
				}
			}
    }
})
